import { defineComponent, reactive, ref } from "vue";
import LPopup from "@/components/public/lPopup/lPopup";
import styles from "./ChannelSalerAdd.module.less";
import { message } from "ant-design-vue";
import promotionChannelSalerService from "@/modules/individualOrdersManagement/promotion/promotionChannelSaler.service";
import _ from "lodash";
export default defineComponent({
  emits: ["editSuccess"],
  setup(props: any, { expose, emit }) {
    const popupRef = ref(null as any);
    const $promotionChannelSalerService = new promotionChannelSalerService();
    const state = reactive({
      channel_id: "",
      id: "",
    })
    const form_ori = {
      name: "",
      mobile: "",
    }
    const form = reactive(_.cloneDeep(form_ori) as any)
    const open = (channel_id: number, record: any) => {
      state.channel_id = channel_id.toString() || "";
      state.id = record?.id || "";
      if (state.id) {
        form.name = record?.name || "";
        form.mobile = record?.mobile || "";
      }
      popupRef.value.open();
    }
    const close = () => {
      state.channel_id = "";
      popupRef.value.close();
    }
    const closed = () => {
      Object.entries(form_ori).forEach((item) => {
        form[item[0]] = item[1];
      })
    }
    // 确认添加
    const submit = () => {
      if (!form.name) {
        message.error(`请输入人员名称`);
        return;
      }
      if (!form.mobile) {
        message.error(`请输入联系电话`);
        return;
      }
      if (state.id) {
        $promotionChannelSalerService.edit({
          id: state.id,
          channel_id: state.channel_id,
          name: form.name,
          mobile: form.mobile
        }).then(res => {
          message.success("编辑成功");
          close();
          emit("editSuccess");
        })
      } else {
        $promotionChannelSalerService.add({
          channel_id: state.channel_id,
          name: form.name,
          mobile: form.mobile
        }).then(res => {
          message.success("添加成功");
          close();
          emit("editSuccess");
        })
      }
    }
    expose({
      open,
      close,
    });
    // 输入行
    const SignRow = (signRowProps, { slots: signRowSlots }) => {
      return (
        <div class={styles['sign-row']}>
          <span class={styles.label}>{signRowProps.label}</span>
          <div class={styles.value}>
            {
              signRowSlots?.default?.()
            }
          </div>
        </div>
      )
    }
    return () => (
      <LPopup title={state.id ? "人员编辑" : "人员添加"} ref={popupRef} onClosed={() => { closed() }}>
        <div class={styles.container}>
          <div class={styles['sign-rows']}>
            <SignRow label="人员名称">
              <a-input v-model:value={form.name} placeholder="请输入人员名称..." />
            </SignRow>
            <SignRow label="联系电话">
              <a-input v-model:value={form.mobile} placeholder="请输入联系电话..." />
            </SignRow>
          </div>
          <div class={styles.footer}>
            <a-button onClick={() => { popupRef.value.close() }}>取消</a-button>
            <a-button type="primary" onClick={() => { submit() }}>确认</a-button>
            <span class={styles['origin-password']}>初始密码：123456</span>
          </div>
        </div>
      </LPopup>
    )
  }
})